<template>
    <div class="signin">
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="ba_f59 pad_20 flex-bet">
                <div class="">
                    <div class="wei fon_14">签到</div>
                    <div class="mar_t10">签到可领积分，并可额外赠送优惠券，留存客户</div>
                </div>
                <div class="">
                    <el-switch v-model="open" active-value="1" inactive-value="2" @change="switchSign"></el-switch>
                </div>
            </div>
            <div class="mar_t20 flex-y-top" v-show="open=='1'">
                <el-form ref="form" :model="form" label-width="180px">
                    <div class="shuju_title mar_b20">
                        <div class="shuju_title_text">
                            <span>基本信息</span>
                        </div>
                    </div>
                    <el-form-item label="签到名称" :required='true' prop="name" >
                        <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
                    </el-form-item>
                    <el-form-item label="签到说明">
                        <el-input v-model="form.introduce" placeholder="请输入活动说明"></el-input>
                    </el-form-item>
                    <el-form-item label="背景图片" :required='true' prop="icon" >
                        <div class="uploadSource bor_de rel flex" v-if="form.icon">
                            <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                                <i class="el-icon-check" ref="imgicon1"></i>
                                <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
                            </label>
                            <img :src="form.icon" @click='test(1)' class="wid"/>
                        </div>
                        <div class="uploadSource flex-center curs" v-else @click='test(1)'>
                            <i class="el-icon-plus fon_40 color_d9"></i>
                        </div>
                        <div class="yb_margin">建议尺寸：375*193</div>
                    </el-form-item>
                    <div class="shuju_title mar_b20">
                        <div class="shuju_title_text">
                            <span>签到规则</span>
                        </div>
                    </div>
                    <el-form-item label="日常签到" :required='true'>
                        <div class="t_l">
                            <div class="" v-for="(item,index) in form.oneDay" key="1" >
                                <el-input placeholder="第一天签到奖励" v-model="item.integral" type="number"
                                          class="daySignin mar_b20">
                                    <template slot="prepend">第一天</template>
                                    <template slot="append">积分</template>
                                </el-input>
                                <span class="mar_lr10">加</span>
                                <span class="time_item">
                                    <el-input-number v-model="item.growth"
                                                     controls-position="right" :min="0"
                                                     :max="99999999"
                                                     class=""></el-input-number>
                                <span class="mar_l10">成长值</span>
                                </span>
                            </div>
                            <div  v-for="(item,index) in form.twoDay" key="2" >
                                <el-input placeholder="第二天签到奖励" v-model="item.integral" type="number"
                                          class="daySignin mar_b20">
                                    <template slot="prepend">第二天</template>
                                    <template slot="append">积分</template>
                                </el-input>
                                <span class="mar_lr10">加</span>
                                <span class="time_item">
                                    <el-input-number v-model="item.growth"
                                                     controls-position="right" :min="0"
                                                     :max="99999999"
                                                     class=""></el-input-number>
                                <span class="mar_l10">成长值</span>
                                </span>
                            </div>
                            <div  v-for="(item,index) in form.threeDay" key="3" >
                                <el-input placeholder="第三天签到奖励" v-model="item.integral" type="number"
                                          class="daySignin mar_b20">
                                    <template slot="prepend">第三天</template>
                                    <template slot="append">积分</template>
                                </el-input>
                                <span class="mar_lr10">加</span>
                                <span class="time_item">
                                    <el-input-number v-model="item.growth"
                                                     controls-position="right" :min="0"
                                                     :max="99999999"
                                                     class=""></el-input-number>
                                <span class="mar_l10">成长值</span>
                                </span>
                            </div>
                            <div  v-for="(item,index) in form.fourDay" key="4" >
                                <el-input placeholder="第四天签到奖励" v-model="item.integral" type="number"
                                          class="daySignin mar_b20">
                                    <template slot="prepend">第四天</template>
                                    <template slot="append">积分</template>
                                </el-input>
                                <span class="mar_lr10">加</span>
                                <span class="time_item">
                                    <el-input-number v-model="item.growth"
                                                     controls-position="right" :min="0"
                                                     :max="99999999"
                                                     class=""></el-input-number>
                                <span class="mar_l10">成长值</span>
                                </span>
                            </div>
                            <div  v-for="(item,index) in form.fiveDay" key="5" >
                                <el-input placeholder="第五天签到奖励" v-model="item.integral" type="number"
                                          class="daySignin mar_b20">
                                    <template slot="prepend">第五天</template>
                                    <template slot="append">积分</template>
                                </el-input>
                                <span class="mar_lr10">加</span>
                                <span class="time_item">
                                    <el-input-number v-model="item.growth"
                                                     controls-position="right" :min="0"
                                                     :max="99999999"
                                                     class=""></el-input-number>
                                <span class="mar_l10">成长值</span>
                                </span>
                            </div>
                            <div  v-for="(item,index) in form.sixDay" key="6" >
                                <el-input placeholder="第六天签到奖励" v-model="item.integral" type="number"
                                          class="daySignin mar_b20">
                                    <template slot="prepend">第六天</template>
                                    <template slot="append">积分</template>
                                </el-input>
                                <span class="mar_lr10">加</span>
                                <span class="time_item">
                                    <el-input-number v-model="item.growth"
                                                     controls-position="right" :min="0"
                                                     :max="99999999"
                                                     class=""></el-input-number>
                                <span class="mar_l10">成长值</span>
                                </span>
                            </div>
                            <div  v-for="(item,index) in form.sevenDay" key="7" >
                                <el-input placeholder="第七天签到奖励" v-model="item.integral" type="number" class="daySignin">
                                    <template slot="prepend">第七天</template>
                                    <template slot="append">积分</template>
                                </el-input>
                                <span class="mar_lr10">加</span>
                                <span class="time_item">
                                    <el-input-number v-model="item.growth"
                                                     controls-position="right" :min="0"
                                                     :max="99999999"
                                                     class=""></el-input-number>
                                <span class="mar_l10">成长值</span>
                                </span>
                            </div>
                        </div>
                    </el-form-item>

                    <div class="shuju_title mar_b20">
                        <div class="shuju_title_text">
                            <span>签到奖励</span>
                        </div>
                    </div>
                    <el-form-item label="连续签到" :required='true'>
                        <div class="t_l numberip flex">
                            <div>
                                <div v-for="(item,index) in form.continuity" :key="index" class="mar_b10">
                                    每连续签到：
                                    <el-input-number v-model="item.days" controls-position="right" :min="2" :max="1000000"></el-input-number>
                                    <span class="mar_l10">天</span>
                                    <span class="mar_l20">赠送积分：</span>
                                    <el-input-number v-model="item.integral" controls-position="right" :min="1" :max="1000000"></el-input-number>
                                    <span class="mar_l10">分</span>
                                    <span class="mar_l20">赠送成长值：</span>
                                    <el-input-number v-model="item.growth" controls-position="right" :min="1" :max="1000000"></el-input-number>
                                    <span class="mar_l10">个</span>
                                    <span class="mar_l20">赠送优惠券：</span>
                                    <el-select  v-model="item.couponId" placeholder="无" class="givecoupon">
                                        <el-option v-for="item in comgrouping" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                    <el-input-number v-model="item.num" controls-position="right" :min="1" :max="1000000"></el-input-number>
                                    <span class="mar_l10">张</span>
                                    <el-button size="mini" type="text" @click="delSpecMethod(index)" class="mar_l20">删除</el-button>
                                </div>
                                <p class="yb_margin lh16" v-show="form.continuity.length>0">注意：请确保优惠券库存充足，若优惠券无库存时，则用户无法获取优惠券奖励</p>
                                <div class="addgoods textbutton" v-show="this.form.continuity.length<10">
                                    <i class="el-icon-plus"></i>
                                    <el-button  type="text" class="" @click="addSpecMethod">添加连续签到</el-button>
                                    <span class="yb_margin lh16 mar_l10">最多可添加10条</span>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c"  v-show="open=='1'">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
        <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>
    </div>
</template>
<script>
    import {getSelectCoupon} from "@/api/user";
    import {getConfig, postConfig} from "@/api/setup";
    import attachmentImg from "@/plugins/attachment-img";

    export default {
        created() {
            this.bus.$emit('loading', true);
            this.init();
            this.getSelectCoupon()
        },
        components: {attachmentImg,},
        data() {
            return {
                form: {
                    name: '',
                    introduce: '',
                    icon: '',

                    oneDay:[{
                        integral:'1',
                        growth:'1',
                    }],
                    twoDay:[{
                        integral:'2',
                        growth:'2',
                    }],
                    threeDay:[{
                        integral:'3',
                        growth:'3',
                    }],
                    fourDay:[{
                        integral:'4',
                        growth:'4',
                    }],
                    fiveDay:[{
                        integral:'5',
                        growth:'5',
                    }],
                    sixDay:[{
                        integral:'6',
                        growth:'6',
                    }],
                    sevenDay:[{
                        integral:'7',
                        growth:'7',
                    }],
                    continuity:[
                        {
                            days:'',
                            integral:'',
                            growth:'',
                            couponId:[],
                            num:'',
                        }
                    ],
                },
                open:'1',
                comgrouping:[],
                value: '',
                timeData: [new Date(), new Date().setMonth(new Date().getMonth() + 3)],
                collapseName: '',
            }
        },
        methods: {
            async getSelectCoupon(){
                const {data} = await getSelectCoupon()
                this.comgrouping = data?data:[]
            },
            async init() {
                const {data} = await getConfig({ident: 'signin'});
                this.form2 = this.form
                this.open = data.open?data.open:'1'
                this.form = Object.assign(this.form2, data);
                this.bus.$emit('loading', false)
            },
            enter(i = 0) {
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i = 0) {
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form2.environment.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                    }
                }
            },
            //添加连续签到
            addSpecMethod() {
                let specObj = {
                    days:'',
                    integral:'',
                    growth:'',
                    couponId:[],
                    num:'',
                }
                this.$set(this.form.continuity, this.form.continuity.length, specObj)
            },
            //删除连续签到
            delSpecMethod(index) {
                this.$delete(this.form.continuity, index)
            },
            submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        this.form.ident = 'signin'
                        this.form.identName = '签到规则'
                        this.form.open = this.open
                        const {msg} = await postConfig(this.form);
                        this.$baseMessage(msg, "success");
                        this.init();
                    } else {
                        return false;
                    }
                });
            },
            async switchSign(){
                this.form.ident = 'signin'
                this.form.identName = '签到规则'
                this.form.open = this.open
                const {msg} = await postConfig(this.form);
                this.$baseMessage(msg, "success");
                this.init();
            },
        }
    }
</script>
<style lang="scss">
    .signin {
        .time_item .el-input {
            width: 180px;
        }
        .numberip .el-input {
            width: 120px !important;
        }
        .numberip .el-input-number {
            width: 120px;
        }
        .givecoupon{
            width: 200px;
            margin-right: 10px;
        }
        .givecoupon .el-input{
            width: 200px !important;
        }
        .el-form {
            width: 100%;
        }
    }
</style>
